<template>
  <div class="main">
    <div style="flex: 1">
 
      <ul class="bannerUlx">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo width"
          unique-opened
          @open="handleOpen"
          @close="handleClose"
        >
          <span :key="index" v-for="(item,index) in countBanner">
            <span v-if="item.child">
              <el-submenu :index="index+''">
                <template slot="title">
                  <router-link :to="item.path">{{item.name}}</router-link>
                </template>
                <el-menu-item-group>
                  <el-menu-item :key="index+'-'+k " v-for="(i,k) in item.child ">
                    <router-link :to="i.path">{{i.name}}</router-link>
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </span>
            <el-menu-item :index="index+''" v-else>
              <span slot="title">
                <router-link :to="item.path">{{item.name}}</router-link>
              </span>
            </el-menu-item>
          </span>
        </el-menu>
      </ul>
    </div>
    <router-view style="flex: 5;" class="minghiehtt"></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      countBanner: [
        {
          name: "基本资料",
          path: "/Account/Mydata",
          child: [
            { name: "基本资料", path: "/Account/Mydata" },
            { name: "修改密码", path: "/Account/removepath" },
            { name: "快捷登陆", path: "/Account/Log2" }
          ]
        },
        {
          name: "资格认证",
          path: "/Account/Certification",
          child: [
            { name: "实名认证", path: "/Account/Certification" },
            { name: "保证金", path: "/Account/Margin" },
            { name: "分成资格", path: "/Account/quali" }
          ]
        },
        { name: "消息中心", path: "/Account/Massage" },

        { name: "我要理财", path: "/Account/Financial" },
        { name: "我要炒股", path: "/Account/StocksEnd" },
        { name: "我的推广", path: "/Account/Promotion" }
      ],
      bgc: 0
    };
  },
  methods: {
    AboutMeClick(i) {
      this.bgc = i;
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>

<style scoped>
a {
  display: block;
  width: 100%;
  color: #000000;
}

.main {
  width: 100%;
  margin: 0 auto 15px;
  padding-top: 10px;
  display: flex;
}

.bannerUlx {
  background-color: white;
  height: 100%;
}

.bgc {
  background-color: #3fcaad;
  color: #fff;
}
.minghiehtt{
  min-height: calc(100vh - 300px)
}
</style>
